<template>
<div>
    <div style="padding-left:30px;padding-top:30px;">
        <el-form :inline="true"  class="demo-form-inline">
            <el-form-item label="装机容量">
                <el-input v-model="designCapacity" placeholder="装机容量">兆瓦（MW）</el-input>
            </el-form-item>
            <el-form-item label="兆瓦（MW）"></el-form-item>
            <el-form-item label="热电比">
                <el-select v-model="ratio" placeholder="热电比">
                <el-option label="55%" value="0.55"></el-option>
                <el-option label="60%" value="0.60"></el-option>
                <el-option label="65%" value="0.65"></el-option>
                <el-option label="70%" value="0.70"></el-option>
                <el-option label="75%" value="0.75"></el-option>
                <el-option label="80%" value="0.80"></el-option>
                <el-option label="85%" value="0.85"></el-option>
                <el-option label="90%" value="0.90"></el-option>
                <el-option label="95%" value="0.95"></el-option>
                <el-option label="100%" value="1"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData">计算发电小时</el-button>
            </el-form-item>
            </el-form>
    </div>
    <div style="width:95%;height:280px;" id="monthTotal">

    </div>
</div>
    
</template>

<script>
import{
  getIndustryCalculateById
} from '@/api/bus/sensor/sensorData'

export default {
    data (){
        return {
            industryId:'',
            dataType:'',
            startTime:'',
            endTime:'',
            designCapacity: '',
            ratio: '',
            yMax:'0',
            dataXAxis:[],
            dataYAxis:[],
            datas:[],
            myChartMonth:{}
        }

    },
    created() {
        this.industryId = this.$route.query.industryId+"";
        this.dataType= this.$route.query.dataType,
        this.startTime= this.$route.query.startTime,
        this.endTime= this.$route.query.endTime
    },
    mounted(){
        this.drawMonthData();
        
    },
    methods:{

        getData(){
             getIndustryCalculateById(this.industryId,this.dataType,this.startTime,this.endTime,this.ratio,this.designCapacity).then(response=>{
                this.dataXAxis=[];
                this.dataYAxis=[];
                this.datas=[];
                for (let index = 0; index < response.data.length; index++) {
                    var vt = response.data[index];
                    var timePoint='';
                    if(Number.parseFloat(this.yMax) < Number.parseFloat(vt.data))
                    {
                        this.yMax = vt.data;
                    }
                    if(this.dataType == 'DAY'){
                        timePoint = vt.timePoint.substring(11,16);
                        this.dataXAxis.push(timePoint);
                    }
                    else if(this.dataType == 'MONTH'){
                         timePoint = vt.timePoint.substring(0,10);
                        this.dataXAxis.push(timePoint);
                    }
                    
                    this.datas.push({
                            name : timePoint,
                            value: [timePoint,vt.data]
                        })

                }
                this.myChartMonth.setOption({
                    xAxis: {
                        type     : 'category',
                        splitLine: {
                            show: false
                        },
                        data:this.dataXAxis
                    },
                    yAxis:{
                        data:this.dataYAxis,
                        max:this.yMax*1.2,
                    },
                    type:{
                        type:'line',
                    },
                    series:{
                        data:this.datas
                    }
                })
            })
        },
        drawMonthData(){
            let that = this;
            that.myChartMonth = that.$echarts.init(document.getElementById('monthTotal'));
            that.myChartMonth.setOption({
                
                backgroundColor:'#FFFFFF',
                title: {
                    text: '累计发电小时'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: { // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                xAxis: [{
                    type: 'category',
                    data:this.dataXAxis,
                }],
                yAxis: [{
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    data:this.dataYAxis,
                }],
                series: [{
                    name: '发电小时',
                    type: 'bar',
                    itemStyle:{
                        normal:{color:'#01949B'},
                    },
                    markPoint : {
                            data : [
                                {type : 'max', name : '最大值'},
                                {type : 'min', name : '最小值'}
                            ]
                        },
                        markLine : {
                            data : [
                                {type : 'average', name : '月平均值'},
                                // {type : 'averageYear', name : '年平均值'}
                            ]
                        },
                    data: this.datas,
                }]

            });
        }
    }
}
</script>

<style>

</style>
